import React, { useEffect, useState } from 'react';
import './UserList.css'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { Select, Form, Space, DatePicker, Input, Button, Pagination } from 'antd';
import { SearchOutlined, RollbackOutlined, AppstoreOutlined, BarsOutlined ,DeleteOutlined} from '@ant-design/icons';
const { RangePicker } = DatePicker;
const onOk = (value) => {
    console.log('onOk: ', value);
};

export default function UserList() {
    const [list, setlist] = useState([])
    useEffect(() => {
        getlist()
    }, [])
    const getlist = () => {
        axios.get(`http://localhost:3000/csc/csclist`).then(res => {
            console.log('获取数据成功', res.data.data)
            setlist(res.data.data)
        })
    }
    const navigate = useNavigate()
    //删除
    const finddel=(id)=>{
        axios.delete(`http://localhost:3000/csc/dels?${id}`).then(res => {
            // console.log('删除成功', res.data.data)
            getlist()
        })
    }
    return (
        <div className='csc_quan'>
            <div className="csc_huadong">
                <div className="csc_div1">
                    <div >
                        <span className="csc_kuai"></span>
                        <span className='csc_span1'>全部用户</span>
                    </div>
                    <div>
                        <div className="csc_select">
                            <Form.Item label="用户标签" >
                                <Select placeholder="请选择">
                                    <Select.Option value="demo">Demo</Select.Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div className="csc_date">
                            <span className='csc_zhu'>注册日期</span>
                            <Space direction="vertical" size={12}>
                                <RangePicker
                                    showTime={{
                                        format: 'HH:mm',
                                    }}
                                    format="YYYY-MM-DD HH:mm"
                                    onChange={(value, dateString) => {
                                        console.log('Selected Time: ', value);
                                        console.log('Formatted Selected Time: ', dateString);
                                    }}
                                    onOk={onOk}
                                />
                            </Space>
                        </div>
                        <div className="csc_input">
                            <Input placeholder="请输入关键字" className='csc_input1' />
                            <Button type="primary" icon={<SearchOutlined />} className='csc_button' />
                            <Button icon={<RollbackOutlined />} className='csc_button' />
                        </div>
                    </div>
                </div>
                <div className="csc_div2">
                    <div className="csc_button2">
                        <span className="csc_button6">
                            <Button icon={<AppstoreOutlined />} className='csc_button3' />
                            <Button icon={<BarsOutlined />} className='csc_button3' />
                        </span>
                        <span className="csc_button4">
                            <Button color="cyan" variant="solid" className='csc_button5' onClick={() => navigate('/zhu/navpage/useradd')} >新增</Button>
                            <Button color="cyan" variant="outlined" className='csc_button5'>批量删除</Button>
                        </span>
                    </div>
                    <div className="csc_list">
                        {
                            list.map(item => {
                                return (
                                    <div className="csc_he" key={item._id}>
                                        <div className="csc_he2">
                                            <div>
                                                <div className="csc_imghe">
                                                    <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%85%A8%E9%83%A8%E7%94%A8%E6%88%B7/u1148.svg" alt="" className='csc_img1' />
                                                </div>
                                                <div className="csc_name">
                                                    <span className='csc_span2'>{item.petname}</span><br />
                                                    <span className='csc_span3'>ID:{item.id}</span>
                                                    <span><Button icon={<DeleteOutlined />}  className='csc_btndel' onClick={()=>finddel(item._id)} /></span>
                                                </div>
                                            </div>
                                            <div>
                                                <div className="csc_annou">
                                                    <button className='csc_btn1'>高血压</button>
                                                    <button className='csc_btn2'>糖尿病</button>
                                                    <button className='csc_btn3'>多次购买</button>
                                                </div>
                                            </div>
                                            <div>
                                                <div className="csc_zhenname">
                                                    <span className='csc_span4'>真实姓名：{item.Realnaem}</span><br />
                                                    <span className='csc_span5'>手机号码：{item.phone}</span><br />
                                                    <span className='csc_span6'>注册时间: 2024-10-09 10:09:09</span>

                                                </div>
                                                <hr style={{ backgroundColor: 'rgb(0,0,0)', position: "relative", top: "-1.4rem" }} />
                                            </div>
                                            <div>
                                                <div className='csc_yongbtn'>
                                                    <button className='csc_btn4'>用户详情</button>
                                                    <button className='csc_btn5'>添加标签</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                        <Pagination
                            total={85}
                            showSizeChanger
                            showQuickJumper
                            showTotal={(total) => `共 ${total} 条`}
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}